<template>
  <!-- 添加友链 -->
  <div @click="clickLetter" class="form-wrap" :class="{ 'is-show': isShow }">
    <!-- 信封上面 -->
    <img
      class="before-img"
      src="http://img.xjlyh.site/2023/09/25/af7875f1e72e4237abc11b374457a456.png"
      style="width: 100%"
    />
    <!-- 信 -->
    <div class="envelope" style="animation: hideToShow 2s">
      <div class="form-main">
        <img
          src="http://img.xjlyh.site/2023/09/25/cdd0613b561a46978d2473179d51c077.jpg"
          style="width: 100%"
        />
        <div>
          <h3 class="welcome-tip">有朋自远方来</h3>
          <div class="form-friend">
            <div class="form-item">
              <span> 名称：</span>
              <input
                class="form-input"
                maxlength="120"
                v-model="linkForm.name"
              />
            </div>
            <div class="form-item">
              <span class="form-label"> logo：</span>
              <input
                class="form-input"
                maxlength="120"
                v-model="linkForm.logo"
              />
            </div>
            <div class="form-item">
              <span class="form-label"> 网址：</span>
              <input
                class="form-input"
                maxlength="120"
                v-model="linkForm.address"
              />
            </div>
            <div class="form-item">
              <span class="form-label"> 描述：</span>
              <input
                class="form-input"
                maxlength="120"
                v-model="linkForm.description"
              />
            </div>
          </div>

          <div class="flex flex--c" style="margin-top: 20px">
            <button class="submit-btn" @click="save">提交</button>
          </div>
          <div>
            <img
              src="http://img.xjlyh.site/2023/09/25/a337c554b6284ed7a688ffd3df5da419.png"
              style="width: 100%; margin: 5px auto"
            />
          </div>
          <p style="font-size: 12px; text-align: center; color: #999">
            欢迎交换友链
          </p>
        </div>
      </div>
    </div>
    <img
      class="after-img"
      src="http://img.xjlyh.site/2023/09/25/212bec993689423ca79ffbc030e3b23a.png"
      style="width: 100%"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useSaveLink } from "./hooks/useSaveLink";
const { linkForm, save } = useSaveLink();
const isShow = ref(false);
const clickLetter = () => {
  isShow.value = true;
};
</script>
<style lang="scss" scoped>
.form-wrap {
  margin: 0 auto;
  overflow: hidden;
  width: 530px;
  height: 447px;
  position: relative;
  top: 0;
  transition: all 1s ease-in-out 0.3s;
  z-index: 0;
  cursor: pointer;
  &.is-show {
    height: 1150px;
    top: -200px;
  }
}

.before-img {
  position: absolute;
  bottom: 126px;
  left: 0;
  background-repeat: no-repeat;
  width: 530px;
  height: 317px;
  z-index: -100;
}

.after-img {
  position: absolute;
  bottom: -2px;
  left: 0;
  background-repeat: no-repeat;
  width: 530px;
  height: 259px;
  z-index: 100;
}

.envelope {
  position: relative;
  margin: 0 auto;
  transition: all 1s ease-in-out 0.3s;
  padding: 200px 20px 20px;
}

.form-main {
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  .welcome-tip {
    text-align: center;
  }
}

.form-friend {
  margin-top: 12px;
  background-color: #eee;
  border: #ddd 1px solid;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  .form-item {
    height: 55px;
    line-height: 55px;
    text-align: center;
    .form-input {
      border: none;
      height: 35px;
      padding: 0 15px;
      color: #606266;
      border-radius: 4px;
      &:focus-visible {
        outline: none;
      }
    }
  }
}
.submit-btn {
  border: none;
  background: rgb(131, 123, 199);
  height: 32px;
  line-height: 32px;
  width: 66px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
</style>
